<template>
	<div>
		
		<!-- <bankeInfo ref="bankeInfo" ></bankeInfo> -->
		<!-- <van-circle v-model="currentRate" :rate="80" :speed="100" :text="text" /> -->

		<!-- <vue-qr :logoSrc="imageUrl" text="QRcode" :size="200"></vue-qr> -->
		
		<van-cell-group>
			<div class="qrcode" ref="qrCodeUrl"></div>
			<van-cell center title="课程号" :value="detailBankeInfo.id"  />
			<van-cell center title="班级名称" :value="detailBankeInfo.title"  />
			<van-cell center title="学校" :value="schoolName"  />
			<van-cell center title="学院" :value="collegeName"  />
			<van-cell center title="年级" :value="detailBankeInfo.grade"  />			
			<van-cell center title="学期" :value="detailBankeInfo.semester"  />	
		</van-cell-group>
		

		<div v-if="userInfo.roles[0] === 'TEACHER'">
			<van-cell center title="开放课程" :value="openCourse">
				<template #right-icon>
					<van-switch v-model="checked" size="24" @input="onInput" v-auth="['course:open','course:close']"/>
				</template>
			</van-cell>
			<van-cell center title="结束课程" :value="endCourse" >
				<template #right-icon>
					<van-switch v-model="endChecked" size="24" :disabled="endChecked" @input="endCourseSwitch" v-auth="['course:end']"/>
				</template>
			</van-cell>
			<div style="margin: 16px;">
				<van-button round block plain type="info" native-type="submit" @click="changeBankeInfo" v-auth="['course:edit']">修改课程信息</van-button>
			</div>			
			<div style="margin: 16px;">
				<van-button round block type="info" @click="rmCourse">解散班级</van-button>
			</div>
		</div>
		<div v-else>
			<div style="margin: 16px;">
				<van-button round block type="info" @click="quitCourse">退出班课</van-button>
			</div>
		</div>
		
	</div>
</template>

<script>
	// import vueQr from 'vue-qr'
	import {Toast,Dialog} from 'vant'
	import QRCode from 'qrcodejs2'
	// import {getCollegeInfo, getSchoolInfo} from '@/api/school.js';
	import {openCourse, closeCourse, endCourse} from '@/api/course.js';
	// import bankeInfo from '@/components/bankeInfo.vue';
	export default {
		name: 'bkDetails',
		components: {
			
			// bankeInfo,
		},
		mounted() {
            this.creatQrCode();
        },
		async created() {			
			this.detailBankeInfo = JSON.parse(localStorage.getItem('detailBankeInfo'));
			this.checked = this.detailBankeInfo.opened;
			this.endChecked = this.detailBankeInfo.ended;
			this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
			this.schoolName = this.detailBankeInfo.school;
			this.collegeName = this.detailBankeInfo.college;
			// console.log(this.userInfo);
			// await getCollegeInfo(this.detailBankeInfo.collegeId).then(res => {
			// 	console.log(res.data);
			// 	if(res.data.code === 0) {
			// 		this.collegeName = res.data.data.name;
			// 		this.schoolId = res.data.data.schoolId;
			// 	}
			// }).catch(err => {	
			// 	console.log(err);
			// });
			// await getSchoolInfo(this.schoolId).then(res => {
			// 	console.log(res.data);
			// 	if(res.data.code === 0) {
			// 		this.schoolName = res.data.data.name;
			// 	}
			// }).catch(err => {	
			// 	console.log(err);
			// });
		},
		data() {
			return {
				checked: true,
				endChecked: false,
				
				// imageUrl: require("../../assets/icon.png"),
				// currentRate: 90,  // 课程进度
				detailBankeInfo: {},
				userInfo: {},
				schoolName: "",
				collegeName: "",
				schoolId: -1,
			}
		},
		computed: {
			// text() { // 课程进度条中间的文字部分
			// 	return '课程完成' + this.currentRate.toFixed(0) + '%';
			// },
			openCourse() {
				return this.checked?"Yes":"No";
			},
			endCourse() {
				return this.endChecked?"Yes":"No";
			}
		},
		methods: {
			onInput(checked) {				
				if(checked === true) { // 开放课程					
					openCourse(this.detailBankeInfo.id).then(res => {
						if(res.data.code === 0 ) 
							console.log('开放课程');
					}).catch(err => {
						console.log(err);
					})
				} else { // 关闭课程
					closeCourse(this.detailBankeInfo.id).then(res => {
						if(res.data.code === 0 ) 
							console.log('关闭课程');
					}).catch(err => {
						console.log(err);
					})
				}
				
			},
			async endCourseSwitch() { // 结束班课switch
				await Dialog.confirm({
					title: '警告',
					message: '结束课程后无法再次开启课程',
				})
				.then(() => {
					endCourse(this.detailBankeInfo.id).then(res => {
						console.log(res.data);
						if(res.data.code === 0) {
							Toast("班课已设置为结束");
						}
					}).catch(err => {
						console.log(err);
					})
				})
				.catch(() => {
					// on cancel
					this.endChecked = false;
				});

				
			},
			creatQrCode() {
                new QRCode(this.$refs.qrCodeUrl, {
                    text: String(this.detailBankeInfo.id), // 需要转换为二维码的内容
                    width: 100,
                    height: 100,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                })
            },
			rmCourse() {  // 发送事件给父组件，让其完成解散班课的功能
				this.$emit('toParent', 'rmCourse');
			},
			quitCourse() { // 发送事件给父组件，让其完成退出班课的功能
				this.$emit('toParent', 'quitCourse');
			},
			changeBankeInfo() {  //  修改班课信息。 转跳到修改班课页 changeBankeInfo
				this.$router.push({
					name: 'changeBankeInfo',
					// params: {
					// 	bkInfo: c
					// }
				});
			}
		}
	}
</script>

<style>
.qrcode{
    display: inline-block;
    /* img {
        width: 132px;
        height: 132px;
        background-color: #fff;
        padding: 6px; 
        box-sizing: border-box;
    } */
}
</style>
